<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="400">
    请更换新版浏览器查看效果!
</canvas>
<script >
 let VSHADER_SOURCE=
 `
attribute vec4 a_position;
attribute vec2 a_texcoord;
varying vec2 v_texcoord;
void main(){
    gl_Position=a_position;
    v_texcoord=a_texcoord;
}
 `;
    let FSHADER_SOURCE=
`
#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D u_sampler;
varying vec2 v_texcoord;
void main(){
    gl_FragColor=texture2D(u_sampler,v_texcoord);
}
`;

    function main(){
        let canvas=document.getElementById('mybox')
        let gl=getWebGLContext(canvas)
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log('初始化shader失败');
            return;
        }
        let n=initVertexBuffers(gl);
        if(n<0){
            console.log('Failed to set the vertex information');
            return;
        }
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        if(!initTextures(gl,n)){
            console.log('设置纹理失败.');
            return;
        }
    }

    //设置纹理坐标，将纹理坐标分配给对应的变量
    function initVertexBuffers(gl){
        let verticesTexCoords=new Float32Array([
            -0.5,0.5,0.0,1.0,
            -0.5,-0.5,0.0,0.0,
            0.5,0.5,1.0,1.0,
            0.5,-0.5,1.0,0.0    
            ]);
        let  n=4;
        let vertexTexCoordBuffer=gl.createBuffer();    
        if (!vertexTexCoordBuffer) {
            console.log('Failed to create the buffer object');
            return -1;
        }
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexTexCoordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER,verticesTexCoords,gl.STATIC_DRAW);

        let FSIZE=verticesTexCoords.BYTES_PER_ELEMENT;
        let a_position=gl.getAttribLocation(gl.program,'a_position');
        if(a_position<0){
            console.log('获取a_Position的存储位置失败');
            return -1;
        }
        gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,FSIZE*4,0);
        gl.enableVertexAttribArray(a_position);

        let a_texcoord=gl.getAttribLocation(gl.program,'a_texcoord');
        if (a_texcoord < 0) {
            console.log('Failed to get the storage location of a_TexCoord');
            return -1;
          }
          gl.vertexAttribPointer(a_texcoord,2,gl.FLOAT,false,FSIZE*4,FSIZE*2);
          gl.enableVertexAttribArray(a_texcoord);
          return n;
    }

    //配置和加载纹理
    function initTextures(gl,n){
     let texture=gl.createTexture();//创建纹理对象
     if(!texture){
         console.log('创建纹理失败');
         return false;
     }
     //从片元着色器获取u_sampler(取样器)的存储位置，用于接收纹理图像
     let u_sampler=gl.getUniformLocation(gl.program,'u_sampler');
        if (!u_sampler) {
            console.log('Failed to get the storage location of u_sampler');
            return false;
        }
     let image=new Image();
        if (!image) {
            console.log('Failed to create the image object');
            return false;
        }
        image.onload=function(){
            //加载纹理
            loadTexture(gl,n,texture,u_sampler,image);
        };

        image.src='./resources/timg.jpg';
        // image.src='./resources/sky.jpg';
        return true;
    }
    function loadTexture(gl,n,texture,u_sampler,image){
     //对图像进行一些处理
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
     //激活纹理单元
     gl.activeTexture(gl.TEXTURE0);
     //开启纹理对象，绑定纹理对象到target，如果此时已经active某个纹理单元，则纹理对象也会绑定到这个纹理单元上
     //gl.TEXTURE_2D   gl.TEXTURE_CUBE_MAP立方体纹理  通过纹理单元来操作纹理对象
     gl.bindTexture(gl.TEXTURE_2D,texture);
     //配置纹理图像映射到图形上的具体方式
     gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
     // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

     //将图像分配给绑定到target上的纹理对象
     gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
     //将0号纹理单元传递给片元着色器中的取样器变量
     gl.uniform1i(u_sampler,0);
     gl.clear(gl.COLOR_BUFFER_BIT);
     gl.drawArrays(gl.TRIANGLE_STRIP,0,n);
    }

</script>

</body>
</html>